<template>
  <div class="fin_pro_two">
    <div class="fintwo_container">
      <el-row :gutter="20">
        <el-col :span="16"><div class="content red"><span>{{part_no1}}</span></div></el-col>
        <el-col :span="8"><div class="content red"><span>{{location_name1 === 'null_location'? '暂无': location_name1}}</span></div></el-col>
      </el-row>
    </div>
    <div class="fintwo_container">
      <el-row :gutter="20">
        <el-col :span="16"><div class="content orange">{{part_no2}}</div></el-col>
        <el-col :span="8"><div class="content orange">{{location_name2 === 'null_location'? '暂无': location_name2}}</div></el-col>
      </el-row>
    </div>
    <div class="fintwo_container">
      <el-row :gutter="20">
        <el-col :span="16"><div class="content yellow">{{part_no3}}</div></el-col>
        <el-col :span="8"><div class="content yellow">{{location_name3 === 'null_location'? '暂无': location_name3}}</div></el-col>
      </el-row>
    </div>
    <div class="fintwo_container">
      <el-row :gutter="20">
        <el-col :span="16"><div class="content green">{{part_no4}}</div></el-col>
        <el-col :span="8"><div class="content green">{{location_name4 === 'null_location'? '暂无': location_name4}}</div></el-col>
      </el-row>
    </div>
    <div class="fintwo_container">
      <el-row :gutter="20">
        <el-col :span="16"><div class="content cyan">{{part_no5}}</div></el-col>
        <el-col :span="8"><div class="content cyan">{{location_name5 === 'null_location'? '暂无': location_name5}}</div></el-col>
      </el-row>
    </div>
    <div class="fintwo_container">
      <el-row :gutter="20">
        <el-col :span="16"><div class="content blue">{{part_no6}}</div></el-col>
        <el-col :span="8"><div class="content blue">{{location_name6 === 'null_location'? '暂无': location_name6}}</div></el-col>
      </el-row>
    </div>
    <div class="fintwo_container">
      <el-row :gutter="20">
        <el-col :span="16"><div class="content purple">{{part_no7}}</div></el-col>
        <el-col :span="8"><div class="content purple">{{location_name7 === 'null_location'? '暂无': location_name7}}</div></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { finishedData } from '@/api/midApi.js'
export default {
  name: 'FinProTwo',
  data() {
    return {
      part_no1: '55021698',
	    part_no2: '55021708',
	    part_no3: '55021809',
	    part_no4: '55021819',
	    part_no5: '55021857',
	    part_no6: '55021860',
	    part_no7: '55020315',
      location_name1: 'null_location',
	    location_name2: 'null_location',
	    location_name3: 'null_location',
	    location_name4: 'null_location',
	    location_name5: 'null_location',
	    location_name6: 'null_location',
	    location_name7: 'null_location',
      timer: null
    }
  },
  created() {
    this.getShowData()
  },
  methods: {
    getShowData () {
      finishedData().then(res => {
        // console.log(res)
        if (res.status == 200) {
          const result = res.data
          this.part_no1 = result.part_no1
          this.part_no2 = result.part_no2
          this.part_no3 = result.part_no3
          this.part_no4 = result.part_no4
          this.part_no5 = result.part_no5
          this.part_no6 = result.part_no6
          this.part_no7 = result.part_no7
          this.location_name1 = result.location_name1
          this.location_name2 = result.location_name2
          this.location_name3 = result.location_name3
          this.location_name4 = result.location_name4
          this.location_name5 = result.location_name5
          this.location_name6 = result.location_name6
          this.location_name7 = result.location_name7
        }
        this.timer = setTimeout(this.getShowData, 5000)
      }).catch(error => { throw error })
    }
  },
  beforeDestroy () {
    clearTimeout(this.timer)
    this.timer = null
  }
}
</script>
<style lang="scss" scoped>
.fin_pro_two{
  width: 100%;
  height: 100%;
  padding: 10px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .fintwo_container{
    width: 70%;
    // height: 12vh;
    .content{
      width: 100%;
      height: 11vh;
      // opacity: 0.7;
      border-radius: 10px;
      font-size: 30px;
      line-height: 11vh;
    }
  }
  .red{ background:rgba(255,69,0,0.6) ;box-shadow: 0 10px 15px#ff0000 }
  .orange{ background: rgba(255,165,0,0.6);box-shadow: 0 10px 15px#ffa500 }
  .yellow{ background: rgba(255,255,0,0.6);box-shadow: 0 10px 15px#ffff00 }
  .green{ background: rgba(124,252,0,0.6);box-shadow: 0 10px 15px#00ff00 }
  .cyan{ background: rgba(0,255,255,0.6);box-shadow: 0 10px 15px#00ffff }
  .blue{ background: rgba(0,0,255,0.6);box-shadow: 0 10px 15px#0000ff }
  .purple{ background: rgba(160,32,240,0.6);box-shadow: 0 10px 15px#a020f0 }
}
</style>